<template>
	<!-- 视频页面 -->
	<view>
		<!-- 选择状态 -->
		<view class="tabss-border">
			<view class="tabss">
				<view :class="{active : isOne}" @click="changeId('0')">
					默认
				</view>
				<view :class="{active : isTwo}" @click="changeId('1')">
					最新
				</view>
				<view :class="{active : isThree}" @click="changeId('2')">
					热门
				</view>
			</view>
		</view>



		<!-- 选择视频分类 -->
		<view class="videoClass">
			<view class="videoClass-item" @click="changeId(3)" :class="id === '0' ? 'active' : ''">
				全部
			</view>
			<view v-for="(item,index) in videoClass" :key="item.classify_id" class="videoClass-item"
				:class="id == item.classify_id ? 'active' : ''" @click="changeId(item.classify_id)">
				<view>
					{{item.classify_name}}
				</view>
			</view>
		</view>


		<!-- 视频列表 -->
		<view class="videoList">
			<view v-for="(item,index) in videoData" :key="item.video_id" class="videoList-item"
				@click="toVideoDetail(item.video_id)">
				<view class="videoList-item-img">
					<u-image width="100%" height="180rpx" :src="item.img" :fade="true" duration="500">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="videoList-item-text">
					<view class="one u-line-3">
						{{item.title}}
					</view>
					<view class="two">
						<view class="two-left">
							<view class="two-left-foot">
								<image src="../../static/foot2.png" mode=""></image>
							</view>
							<view class="two-left-footnumber">
								{{item.browse}}
							</view>
						</view>
						<view class="two-right">
							<view class="two-right-comment">
								<image src="../../static/comment2.png" mode=""></image>
							</view>
							<view class="two-right-commentnumber">
								{{item.praiseSum}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部触发加载更多 -->
		<u-loadmore :load-text="loadText" margin-bottom="30" v-show="!show" :status="status" />

		<u-toast ref="uToast" />

		<Tabbar></Tabbar>
	</view>
</template>

<script>
	import throttle from "lodash/throttle";
	import {
		getVideoClass,
		getVideoData
	} from '../../utils/video.js'

	export default {
		data() {
			return {
				//请求数据要传的参数
				order: '0,DESC,0',
				pageNum: 1,
				pageSize: 7,
				//视频列表数据
				videoData: [],
				//视频列表的分类数据
				videoClass: [],
				//控制视频分类
				id: '0',
				//控制底部加载
				show: false,
				//底部加载的状态
				status: 'loadmore',
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				}
			};
		},
		computed: {
			//判断三种状态的计算
			isOne() {
				return this.order.split(',')[0] === '0'
			},
			isTwo() {
				return this.order.split(',')[0] === '1'
			},
			isThree() {
				return this.order.split(',')[0] === '2'
			}
		},
		methods: {
			//去视频详情
			toVideoDetail(id) {
				uni.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?id=${id}`
				})
			},
			//获取视频分类
			async getVideoClassData() {
				let result = await getVideoClass()
				if (result.code === 200) {
					this.videoClass = result.data
				}
			},
			// 获取视频数据
			async getVideoDatas(isTrue) {
				let result = await getVideoData(this.order, this.pageNum, this.pageSize)
				if (result.code === 200) {
					console.log(result)
					if(isTrue){
						this.videoData = [...result.data,...this.videoData]
						setTimeout(() => {
							uni.stopPullDownRefresh()
						},1000)
						if (result.data.length === 0) {
							this.$refs.uToast.show({
								title: '没有更多内容了!',
								type: 'warning',
								duration: 1000
							})
						}
					}else{
						this.videoData = [...this.videoData, ...result.data]
						this.status = 'loadmore'
						if (result.data.length === 0) {
							this.status = 'nomore'
						}
					}				
				}
			},
			//改变选择
			changeId: throttle(async function(num){
				uni.pageScrollTo({
					scrollTop: 0,
					duration:0,
				});
				let order = this.order
				let orderNum = order.split(',')[0]
				let orderId = order.split(',')[2]
				if (num < '3') {
					if (num === orderNum) {
						return
					} else {
						this.status = 'loadmore'
						this.pageNum = 1
						this.order = `${num},DESC,${orderId}`
					}
				} else if (num === 3) {
					if (orderId === '0') {
						return
					} else {
						this.status = 'loadmore'
						this.pageNum = 1
						this.order = `${orderNum},DESC,${0}`
						this.id = '0'
					}
				} else if (num >= 1000) {
					if (num == orderId) {
						return
					} else {
						this.status = 'loadmore'
						this.pageNum = 1
						this.order = `${orderNum},DESC,${num}`
						this.id = String(num)
					}
				}
				let result = await getVideoData(this.order, this.pageNum, this.pageSize)
				if (result.code === 200) {
					this.videoData = result.data
					console.log(result)
				}
			},300)
		},
		//上拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.pageNum++
				this.getVideoDatas(true)
			}, 500)
		},
		//下拉拉到底的时候触发的方法
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			} else {
				this.pageNum++
				this.status = 'loading'
				setTimeout(() => {
					this.getVideoDatas()
				}, 500)
			}
		},
		onLoad() {
			this.getVideoClassData()
			this.getVideoDatas()
		}
	}
</script>

<style lang="scss" scoped>
	.tabss-border {
		padding-top: 44px;
		width: 100%;
		background-color: white;
		position: sticky;
		top: 0px;
		z-index: 999;

		.tabss {
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			width: 50%;
			margin: 0 auto;


			view {
				display: flex;
				justify-content: center;
				width: 33.33%;
				margin: 0 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				height: 60rpx;

				&.active {
					color: #2979ff;
					border-bottom: 3px solid #2979ff;
				}
			}
		}
	}

	.videoClass {
		width: 100%;
		display: flex;
		margin: 30rpx 0;

		.videoClass-item {
			padding: 16rpx;
			// background-color: #2b85e4;
			// border-radius: 50rpx;
			// color: white;
			font-size: 25.5rpx;
			margin: 0 2.7rpx;

			&.active {
				background-color: #2b85e4;
				border-radius: 50rpx;
				color: white;
			}
		}
	}

	.videoList {
		width: 90%;
		margin: 0 auto;

		.videoList-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.videoList-item-img {
				flex: 5;
				padding-right: 20rpx;

				image {
					width: 100%;
					height: 200rpx;

				}
			}

			.videoList-item-text {
				flex: 5;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.one {
					font-weight: bold;

				}

				.two {
					padding-top: 30rpx;
					width: 100%;
					display: flex;
					color: #82848a;

					.two-left {
						width: 50%;
						display: flex;


						.two-left-foot {
							width: 25%;

							image {
								width: 100%;
								height: 40rpx;
								color: #c8c9cc;

							}
						}

						.two-left-footnumber {
							padding-left: 10rpx;
						}
					}

					.two-right {
						width: 50%;
						display: flex;
						align-items: center;

						.two-right-comment {
							width: 25%;
							display: flex;

							image {
								width: 100%;
								height: 45rpx;

							}
						}

						.two-right-commentnumber {
							padding-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.search {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40rpx;
		display: flex;
		align-items: center;

		.input {
			width: 90%;
		}

		.icon {
			width: 10%;
			padding-left: 25rpx;

			image {
				width: 100%;
				height: 45rpx;

			}
		}
	}

	/deep/.u-lazy-load {
		height: 200rpx;
	}
</style>
